<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--form表单提交地址 action   在form标签中，action属性用于指定表单数据提交到哪一个地址进行处理。-->
<!--methed form 表单提交方式 get/post
get的安全性较差，而post的安全性较好。所以在实际开发中，使用post比较多。-->

<form action="内联框架.html" method="post">
    <table border="1">
        <tr>
            <td><label for="username">用户名：</label></td>
            <td>             <!--placeholder指提示用语 required为必填-->
                <input type="text" placeholder="请输入用户名称" required name="username" id="username" value="" size="50px" maxlength="6">
            </td>
        </tr>
        <tr>
            <td><label for="pwd">密码：</label></td>
            <td>
                <input type="password" placeholder="请输入密码" required name="password" id="pwd" value="" size="50px" maxlength="6">
            </td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td>
                <input type="password" name="password" placeholder="请输入密码" required value="" size="50px" maxlength="6">
            </td>
        </tr>
        <tr>
            <td>手机号：</td>
            <td>
                <input type="tel" name="tel" placeholder="请输入手机号" required  pattern="/^1[1,3,5,8]\d{9}/">
            </td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td>        <!--复选框按钮 checked属性指默认被选中-->
                <input  checked type="checkbox" name="basketball" value="basketball">篮球
                <input type="checkbox" name="volleyboll" value="volleyboll">排球
                <input type="checkbox" name="football" value="football">足球
                <input type="checkbox" name="pingpang" value="pingpang">乒乓球
            </td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>          <!--单选按钮 name属性要一样才能产生互斥效果-->
                <input  checked type="radio" name="sax" value="woman">女
                <input type="radio" name="sax" value="man">男
            </td>
        </tr>
        <tr>
            <td>年龄：</td>
            <td>
                <input type="number" name="number" min="1" max="100" step="1">
            </td>
        </tr>
        <tr>
            <td>滑块：</td>
            <td>
                <input type="range" name="range" min="1" max="100" step="10">
            </td>
        </tr>
        <tr>
            <td>头像：</td>
            <td>
                <input type="file" name="logo" value="logo">
            </td>
        </tr>
        <tr>
            <td>图片按钮：</td>
            <td>
                <input type="image" name="image" src="image/login_step1.jpg" width="200px">
            </td>
        </tr>
        <tr>
            <td>普通按钮：</td>
            <td>
                <input type="button" name="button" value="按钮">
            </td>
        </tr>
        <tr>
            <td>邮箱：</td>
            <td>
                <input type="email" name="email" value="">
            </td>
        </tr>
        <tr>
            <td>个人主页：</td>
            <td>
                <input type="url" name="url" value="">
            </td>
        </tr>
        <tr>
            <td>搜索框：</td>
            <td>
                <input type="search" name="search" value="">
            </td>
        </tr>
        <tr>
            <td>专业：</td>
            <td>             <!--multiple 选择多项-->
                <select name="zhuanye" id="" >
                    <option value="" selected>[选择专业]</option>
                    <option value="">软件工程</option>
                    <option value="">计算机科学与技术</option>
                    <option value="" >财务管理</option>
                    <option value="">医学</option>
                    <option value="">土木工程</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我介绍：</td>
            <td>
                <textarea cols="50" rows="20" readonly>
                    请输入自我介绍
                </textarea>
            </td>
        </tr>
        <tr>
            <td>隐藏域：</td>
            <td>
                <input type="hidden" name="hidden" value="hidden">

                </textarea>
            </td>
        </tr>
        <tr>
            <td><input type="submit" name="sumbit" value="注册"></td>
            <td>
                <input type="reset" name="reset" disabled>
            </td>
        </tr>
    </table>
</form>
</body>
</html>